<template>
  <div class="tab_box">
    <div class="activation_condition">
      <div class="items">
        <div class="label">{{$t('m.userNumber')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="tabObj.userId" :placeholder="$t('m.userNumber')" />
      </div>
      <div class="items">
        <div class="label">{{$t('m.shoujihao')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="tabObj.phone" :placeholder="$t('m.shoujihao')" />
      </div>
      <div class="items">
        <div class="label">{{$t('m.fēnpèishíjiān')}}</div>
        <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" ref="tabAllotTime" @on-change="allotTimeChange" v-bind:placeholder="$t('m.fēnpèishíjiān')" class="ivu-input-w200"></DatePicker>
      </div>
      <div class="items">
        <div class="label">{{$t('m.registeTime')}}</div>
        <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" ref="tabLoginTime" @on-change="loginTimeChange" v-bind:placeholder="$t('m.ClosingTime')" class="ivu-input-w200"></DatePicker>
      </div>
      <div class="items">
        <div class="label">{{$t('m.jīhuózhuàngtài')}}</div>
        <Select v-model="tabObj.activeStatus" class="ivu-input-w200" :placeholder="this.$t('m.jīhuózhuàngtài')">
          <Option :value="''">{{$t('m.entire')}}</Option>
          <Option :value="'0'">{{$t('m.wèijīhuó')}}</Option>
          <Option :value="'1'">{{$t('m.jīhuó')}}</Option>
        </Select>
      </div>
      <div class="items">
        <div class="label">{{$t('m.gēnjìnzhuàngtài')}}</div>
        <Select v-model="tabObj.traceStatus" class="ivu-input-w200" :placeholder="this.$t('m.gēnjìnzhuàngtài')">
          <Option :value="''">{{$t('m.entire')}}</Option>
          <Option :value="'0'">{{$t('m.wèigēnzōng')}}</Option>
          <Option :value="'1'">{{$t('m.yǐgēnzōng')}}</Option>
        </Select>
      </div>
    </div>
    <div style="margin-top:20px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryTab">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryTab">{{$t('m.cháxún')}}</Button>
    </div>
    <Row class="shenTong_tab_item">
      <Col class="item_Col" span="6">
      <div class="item_Col_box">
        <p>{{$t('m.dàijīhuóyònghùshùliàng')}}</p> <span>{{tabDataInfo.unactiveCount}}</span>
      </div>
      </Col>
      <Col class="item_Col" span="6">
      <div class="item_Col_box">
        <p>{{$t('m.yǐgēnjìnyònghùshùliàng')}}</p> <span>{{tabDataInfo.traceCount}}</span>
      </div>
      </Col>
      <Col class="item_Col" span="6">
      <div class="item_Col_box">
        <p>{{$t('m.jīhuóchénggōngliàng')}}</p> <span>{{tabDataInfo.activeCount}}</span>
      </div>
      </Col>
      <Col class="item_Col" span="6">
      <div class="item_Col_box item_Col_box_circle">
        <p>{{$t('m.jīhuóchénggōnglǜ')}}</p>
        <i-circle :size="100" :percent="parseInt(tabDataInfo.activeRate==null?0:tabDataInfo.activeRate)" :stroke-width="13" :trail-width="13" stroke-color="#FFF" trail-color="#2D8CF0" style="    margin-top: 5px;">
          <span class="item_Col_box_circle_title">{{tabDataInfo.activeRate==null?0:tabDataInfo.activeRate}}%</span>
        </i-circle>
        <!-- <span>{{tabDataInfo.activeRate}} %</span> -->
      </div>
      </Col>
    </Row>
    <div class="activation_table">
      <Table :columns="tabTable" :data="tabDataList.list" :loading="tabLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="success" size="small" class="ivu-btn-success ivu-btn-long ivu-btn-small" @click="getBankInfo(row.userId)">{{$t('m.userDetails')}}</Button>
          <br>
          <Button type="warning" class="ivu-btn-warning ivu-btn-long ivu-btn-small" size="small" @click="getRemarkEvent(row.userId)">{{$t('m.bèizhù')}}</Button>
        </template>
      </Table>
    </div>

    <div class="activation_page">
      <Page :total="tabDataList.size" :current.sync="tabPages" :page-size-opts="[1, 10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="tabTwoWritePage" @on-page-size-change="tabTwoClickPage" style="margin: 15px 0;"></Page>
    </div>

    <!--用户详细资料end-->
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <base-info :userId="UserId" :orderGid="null" baseType="" v-if="baseInfoBox"></base-info>
      <div slot="footer"></div>
    </Modal>

    <Remark v-model="RemarkBox" :RemarkData="UserId" :value="true" @ok="RemarkBox=false"></Remark>
  </div>
</template>

<script>
import BaseInfo from '@/components/common/baseInfo'
import Remark from "./remark";
export default {
  name: 'ActivationTabTwo',
  data () {
    return {
      UserId: "",
      RemarkBox: false,
      baseInfoBox: false,
      tabPages: 1,
      tabLoading: false,
      tabObj: {
        'pageNumber': 1,
        'pageSize': 10
      },
      tabTable: [
        {
          title: this.$t('m.fēnpèishíjiān'),
          width: 200,
          align: 'center',
          key: 'allotTime'
        },
        {
          title: this.$t('m.ClosingTime'),
          width: 200,
          align: 'center',
          key: 'registerTime'
        },
        {
          title: this.$t('m.wèifùjiètiānshù'),
          width: 200,
          align: 'center',
          key: 'applyDays',

          sortable: true
        },
        {
          title: this.$t('m.userNumber'),
          width: 200,
          align: 'center',
          key: 'userId'
        },
        {
          title: this.$t('m.shǒujīhào'),
          width: 200,
          align: 'center',
          key: 'phone'
        },
        {
          title: this.$t('m.xingming'),
          width: 200,
          align: 'center',
          key: 'fullName'
        },
        {
          title: this.$t('m.jīhuózhuàngtài'),
          width: 200,
          align: 'center',
          key: 'age',
          render: (h, param) => {
            return h("div", param.row.activeStatus == 0 ? this.$t('m.wèijīhuó') : this.$t('m.jīhuó'));
          }
        },
        {
          title: this.$t('m.gēnjìnzhuàngtài'),
          width: 200,
          align: 'center',
          key: 'age',
          render: (h, param) => {
            return h("div", param.row.traceStatus == 0 ? this.$t('m.wèigēnzōng') : this.$t('m.yǐgēnzōng'));
          }
        },
        {
          title: this.$t('m.operate'),
          slot: 'action',
          width: 150,
          fixed: 'right',
          align: 'center'
        }


      ],
      tabDataInfo: {},
      tabDataList: {
        size: 1,
      },
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  components: {
    BaseInfo,
    Remark
  },
  props: {
    tabsVal: '',
  },
  watch: {

    tabsVal (val) {
      if (val === 'name2') {
        this.queryTab()
      }
    },
  },
  methods: {
    getRemarkEvent (userId) {
      this.UserId = userId
      this.RemarkBox = true
    },

    getBankInfo (userId, orderGid) {
      this.baseInfoBox = true
      this.UserId = userId
      this.baseInfoOrderGid = orderGid
    },
    // 修改页数
    tabTwoWritePage (index) {
      this.tabObj.pageNumber = index
      this.queryTab()
    },
    // 修改每页条数
    tabTwoClickPage (index) {
      this.tabObj.pageSize = index
      this.queryTab()
    },

    emptyQueryTab () {
      this.tabObj = {
        'pageNumber': 1,
        'pageSize': 10
      }
      this.$refs.tabAllotTime.handleClear()
      this.$refs.tabLoginTime.handleClear()
      this.queryTab()
    },
    // tab请求数据
    queryTab () {
      this.tabLoading = true
      let param = {},
        query = '';
      param.userId = this.tabObj.userId
      param.phone = this.tabObj.phone
      param.activeStatus = this.tabObj.activeStatus
      param.traceStatus = this.tabObj.traceStatus
      param.pageNumber = this.tabObj.pageNumber
      param.pageSize = this.tabObj.pageSize
      param.allotStartDate = this.tabObj.allotStartDate
      param.allotEndDate = this.tabObj.allotEndDate
      param.startDate = this.tabObj.startDate
      param.endDate = this.tabObj.endDate
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/operation/active/unreborrow/list?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.tabDataInfo = res.body.result.activeStatisticsVo == null ? {} : res.body.result.activeStatisticsVo
          this.tabDataList = res.body.result.userActiveListVo
        } else {
          this.tabDataInfo = {}
          this.tabDataList = {}
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
        setTimeout(() => {
          this.tabLoading = false
        }, 500);

      });

    },
    allotTimeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.tabObj.allotStartDate = e[0];
        this.tabObj.allotEndDate = e[1];
      }
    },
    loginTimeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.tabObj.startDate = e[0];
        this.tabObj.endDate = e[1];
      }
    },
  },
  filters: {},
  computed: {},
  created () { },
  mounted () { },
  destroyed () { }
}
</script>

<style lang="scss" scoped>
@import "../../../static/style.css";
@import "../../../static/common.scss";
.activation_condition {
  margin-top: 20px;
  .items {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 200px;

    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: right;
      color: #222;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
.activation_table {
  margin-top: 20px;

  .ivu-btn-long {
    margin: 6px 0;
  }
}
.activation_page {
  float: right;
}

.shenTong_tab_item {
  // background: red;
  margin-top: 20px;
  .item_Col {
    // background: #fff;
    text-align: center;
    .item_Col_box {
      height: 160px;
      margin: 12px;
      padding: 19px 30px;

      background: #f0f2f5;
      p {
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      span {
        font-size: 45px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(34, 34, 34, 1);
      }
    }
    .item_Col_box_circle {
      p {
        color: #fff;
      }
      background: linear-gradient(
        90deg,
        rgba(45, 140, 240, 1) 0%,
        rgba(18, 91, 212, 1) 100%
      );
      border-radius: 5px;
      .item_Col_box_circle_title {
        font-size: 18px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
